import { Ref, ref, watch } from 'vue';
import { isEmpty } from '@/utils/util';

export type LabelPosition = 'left' | 'right' | 'top';
export type BreakpointsSpan = [number, number, LabelPosition][];
export type SpanConfig = {
  span: number;
  labelPosition: LabelPosition;
};

const breakpointsConfigDefault: BreakpointsSpan = [
  [576, 24, 'top'],
  [768, 12, 'top'],
  [992, 8, 'right'],
  [1352, 6, 'right'],
  [1750, 5, 'right'],
  [Infinity, 4, 'right'],
];
const getSpanConfig = (
  width: number,
  span: number | BreakpointsSpan,
  labelPosition: LabelPosition,
) => {
  if (span && typeof span === 'number') {
    return {span, labelPosition,};
  }
  let spanConfig = (!isEmpty(span) ? span : breakpointsConfigDefault) as BreakpointsSpan;
  let breakPoint = [, 8, labelPosition];
  for (let item of spanConfig) {
    if (width < item[0] + 16) {
      breakPoint = item;
      break;
    }
  }
  return {
    span: breakPoint[1],
    labelPosition: breakPoint[2],
  };
};

export function useSpanConfig(
  width: Ref<number>,
  span: number | BreakpointsSpan,
  labelPosition: LabelPosition,
) {
  let formContext = ref<SpanConfig>({span: 8, labelPosition: labelPosition});

  watch(width, () => {
    const spanConfig = getSpanConfig(width.value, span, labelPosition);
    Object.assign(formContext.value, spanConfig);
  });

  return formContext;
}
